<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			 div{
				 width: 900px ;
				 height: 300px;
				 background-color: orangered;
			 }
		</style>
	</head>
	<body>
		<button type="button">点击</button>
		<div id="box1" >
			
		</div>
	</body>
	<script>
		//通过style.属性='9px'这种具有较高的优先级 修改的数据都存到了 行间样式中了
		   oBox=document.getElementById('box1');
			 obtn =document.querySelector('button');
			 obtn.onclick=function(){
				 //oBox.style.width='500px';
				 oBox.style.backgroundColor="yellow";
				 oBox.style.height='500px';
		//读取时也是读取内联样式 不能读取 style 中的样式
		    console.log(oBox.style.width)
			 }
	</script>
</html>
